
import textOver from '~/components/echarts/echartsUtil/index'
import { onMounted, reactive, ref } from 'vue'
import {
	chartsOptions,
	BarECOption,
	PieECOption,
	GaugeECOption,
	EChartsOption,
	ChartsEvents
} from '~/components/echarts'
import { color3, color4 } from '~/components/echarts/colorType'
import { ZRColor } from 'echarts/types/dist/shared'
/**
 *
 */
export const useStatisDeviceByUserObject = () => {
	const options = chartsOptions<BarECOption>({
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				crossStyle: {
					color: '#999'
				}
			}
		},
		yAxis: [
			{
				type: 'value',
				name: '人数（万人）'
			},
			{
				type: 'value',
				name: ''
			}
		],
		xAxis: {
			data: []
		},
		legend: {
			top: '2%',
			right: '0%'
		},
		grid: { bottom: '40px', right: '5%', left: '5%' },
		series: [
			{
				type: 'bar',
				data: [],
				itemStyle: {}
			},
		]
	})
	// let  itemStyle={
	let colors: ZRColor = {
		type: 'linear',
		x: 0,
		x2: 0,
		y: 0,
		y2: 1,
		colorStops: color3
	}
	let colors2: ZRColor = {
		type: 'linear',
		x: 0,
		x2: 0,
		y: 0,
		y2: 1,
		colorStops: color4
	}
	// }
	let objs = ref(null)
	const init = async () => {

		let dataNow=[1,2,3,4,5,6]
		options.xAxis = {
			data: ['1月', '2月', '3月', '4月', '5月', '6月'],
			axisLabel: {
				interval: 0,
				formatter: function (
					value //X轴的内容
				) {
					return textOver(value)
				}
			}
		}
		options.series = [
			{ type: 'bar', name: '', itemStyle: { color: colors }, barWidth: '10%', data: dataNow },
		]
	}

	const selectchanged = (params: ChartsEvents.Events['selectchanged']) => {}
	/**
	 * @param  {string} params
	 */
	const handleChartClick = (params: string) => {}

	onMounted(() => {
		// init();
	})
	return {
		options,
		objs,
		selectchanged,
		handleChartClick,
		init
	}
}
